<template>
	<view class="">
		<view v-if="show">
			<!-- <view  style="text-align: right;margin: 10px 20px;">
				<button type="default" :disabled="disable" style="width: 100px;">清空</button>
			</view> -->
			<view class="u-m-l-30 u-m-t-30 wrap" v-for="(item, index) in list" :key="index" :name="item.id">
				<u-checkbox-group :wrap="true" @change="checkboxgroupChange(item.id,item.is_checked)">
					<u-checkbox shape="circle" v-model="item.is_checked" class="checkbox">
						<u-card :border-radius="0" class="u-m-t-0 u-m-b-0 u-m-l-10" style="background-color: hsl(0, 0%, 98%);" :border="false"
						 :head-border-bottom="false" :foot-border-top="false" :show-head="false">
							<view class="u-flex" slot="body">
								<image :src="item.goods.cover_url" style="width: 160rpx;height: 160rpx;"  @tap="bookDetail(item.goods_id)"></image>
								<view class="u-flex-wrap u-m-l-20">
									<view style="font-size: 12px;">{{item.goods.title}}</view>
									<view style="font-size: 9px;color: #999999;">{{item.goods.description}}</view>
									<view class="u-flex u-m-t-20">
										<view style="color:#cc0000;font-weight: bold;">￥{{item.goods.price}}</view>
										<u-number-box :min="1" class="u-m-l-30" :input-width="70" :input-height="40" integer v-model="item.num"
										 @change="numChange" ></u-number-box>
										<u-icon @click="deleteCart(item.id)" class="u-m-l-30" name="trash-fill" color="#ccc" size="40"></u-icon>
									</view>
								</view>
							</view>
						</u-card>
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="u-line-1 u-flex bottom-price">
				<u-checkbox-group class="u-m-l-30">
					<u-checkbox shape="circle" v-model="allSelect" @change="allSelectChange" name="all">全选</u-checkbox>
				</u-checkbox-group>
				<text class="u-m-l-80">
					合计:<text style="color:#cc0000 ;">￥{{total}}</text>
				</text>
				<u-button @click="goSettlement()" class="u-m-l-80" size="medium" style="display: inline-block;" type="error" shape="circle" :disabled="disable">去结算
				</u-button>
			</view>
			<u-modal @confirm="confirmDelete" width="70%" :mask-close-able="true" show-cancel-button confirm-text="删除"
			 cancel-text="我再想想" v-model="showModel" content="确认将这一个宝贝删除？"></u-modal>
		</view>
		<!-- 没有token时的效果 -->
		<view v-else>
			<u-empty text="暂无数据" mode="data"></u-empty>
		</view>
		<!-- 购物车为空时的效果 -->
		<view v-if="this.list.length===0">
			<u-empty text="暂无数据" mode="data"></u-empty>
			<view class="" style="text-align: center;color: red;font-size: 12px;" @tap="routeIndex()">
				快去选购一波吧
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				disable: true,
				show: false,
				showModel: false,
				allSelect: false,
				currnetSelectCart: [],
				wantDelete: null,
				// 购物车的数量
				cartNum: '',
				total: 0,
				// 购物车商品数据
				list: [],
				bookId:'',
				number:''
			}
		},
		watch: {
			currnetSelectCart(val) {
				if (val.length == this.list.length)
					this.allSelect = true
				else this.allSelect = false
			},
		},
		mounted() {
			// 初始化全选状态
			let selects = this.list.filter((item) => {
				return item.is_checked == false
			})
			if (selects.length == this.list.length)
				this.allSelect = true

			// 初始化合计
			this.calculateTotal()
		},
		methods: {
			// 计算合计金额
			calculateTotal() {
				// console.log(this.list)
				this.total = this.list.filter(item => {
					return item.is_checked == true
				}).reduce((pre, now) => {
					return pre + (now.num * now.goods.price)
				}, 0)
				// console.log(this.total)
			},
			// 获取购物车列表
			async getData() {
				await this.$u.get('/api/carts?include=goods').then(res => {
					this.cartNum = res.data.data.length
					this.list = res.data.data;
					console.log(res)
					this.calculateTotal();
					if(this.cartNum!=0){
						this.disable=false
					}else{
						this.disable=true
					}
				})
			},
			// 删除购物车
			deleteCart(id) {
				this.showModel = true
				this.wantDelete = id;
			},
			async confirmDelete() {
				await this.$u.delete('/api/carts/' + this.wantDelete).then(res => {
					if (res.statusCode == 204) {
						uni.showToast({
							title: "删除成功",
							icon: 'success'
						});
						this.getData()
						this.calculateTotal()
					} else {
						uni.showToast({
							title: "删除失败",
							icon: 'error'
						})
					}
				}).catch(err => {

				})
			},
			// 点击全选
			allSelectChange(e) {
				if (e.value == true)
					this.list.map(val => {
						val.is_checked = true;
						this.disable=false
					})
				else
					this.list.map(val => {
						val.is_checked = false;
						this.disable=true
					})
				this.calculateTotal()
			},
			// 选择商品
			async checkboxgroupChange(e, isChecked) {
				this.currnetSelectCart = e
				this.calculateTotal()
				console.log(e);
				console.log(isChecked);
				const params = {
					cart_ids: this.currnetSelectCart
				}
				// await this.$u.patch('/api/carts/checked',params).then(res=>{
				// 	console.log(res)
				// })
			},
			// 商品数量改变
			numChange(value) {
				this.number=value.value
				console.log(value.value);
				
				this.calculateTotal()
			},
			// 去结算,跳转到订单预览界面
			goSettlement() {
				uni.navigateTo({
					url: '/pages/order-preview/order-preview'
				})
			},
			routeIndex() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			bookDetail(res){
				console.log(res);
				this.bookId=res
				uni.$on('send',res=>{
					uni.$emit('transmitId',this.bookId)
				});
				uni.navigateTo({
					url:"../bookDetail/bookDetail"
				})
			}
		},
		async onShow() {
			const token = this.vuex_token
			if (!token) {
				this.show = false;
				uni.showModal({
					title: '请先登陆!!!!',
					showCancel: false,
					success: function(res) {
						if (res.confirm == true) {
							// 点击确认跳转到登陆界面
							uni.$u.route({
								type: 'navigateTo',
								url: 'pages/auth/loginIn'
							})
							// 点击取消则跳转到首页
						} else if (res.cancel) {}
					}
				});
			} else {
				// 若有登陆状态,则请求用户的购物车列表数据
				this.show = true;
				this.getData();
				this.calculateTotal()
			}
		}
	}
</script>

<style scoped>
	.bottom-price {
		display: flex;
		justify-content: space-around;
		position: fixed;
		bottom: calc(var(--window-bottom, 0) + 0rpx);
		width: 100%;
		background-color: #f3f4f6;
		padding: 40rpx 0;
	}

	.wrap {
		padding: 0rpx 40rpx 50rpx 40rpx;
		/* background-color: #f3f4f6; */
	}

	.u-btn {
		margin-right: 10px;
	}

	.u-m-l-80 {
		margin: 0 !important;
	}

	.u-m-t-30 {
		margin: 0 !important;
	}

	/* .u-size-medium{
	padding: 10px !important;
} */
</style>
